<template>
<div class="lie">
<el-row class="tac">
  <el-col :span="12">
    
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <el-submenu index="1">
        <template slot="title">
        
          <span>配件</span>
        </template>
        <el-menu-item-group>
          
          <el-menu-item index="1-1">鼠标</el-menu-item>
          <el-menu-item index="1-2">键盘</el-menu-item>
        </el-menu-item-group>
        
          <el-menu-item index="1-3">显示器</el-menu-item>
        </el-menu-item-group>
       
      </el-submenu>
      <el-menu-item index="2">
        
        <span slot="title">游戏本</span>
      </el-menu-item>
      <el-menu-item index="3">
        
        <span slot="title">学生本</span>
      </el-menu-item>
    </el-menu>
  </el-col>
  
   
</el-row>
</div>
</template>
<script>
  export default {
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<style>
.lie{width:500px;
position:relative;
margin-top:-600px;
margin-left:300px;
height:600px;
}
</style>
